// import './MyBox.css';
// import React from "react";
//
// class MyBox extends React.Component{
//     render (){
//         return(
//             <div className="MyBox">
//                 <button onClick={this.Open}>打开摄像头</button>
//                 <button onClick={this.Close}>关闭摄像头</button>
//                 <button onClick={this.Copy}>截取图像</button>
//                 <div>
//                     <video id="video" className="Box"></video>
//                     <canvas id="canvas" className="Box"></canvas>
//                 </div>
//             </div>
//         );}
//
//     Open(){
//
//         const video = document.getElementById("video")
//
//         if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia()){
//             navigator.mediaDevices.getUserMedia({
//                 video:true,
//                 audio:true
//             }).then(function (stream) {
//                 console.log(stream)
//                 MediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];
//                 video.src = (window.URL).createObjectURL(stream);
//                 video.play();
//             }).catch(function (err) {
//                 console.log(err)
//             })
//         }else if (navigator.getMedia){
//             navigator.getMedia({
//                 video:true
//             }).then((stream) => {
//                 console.log(stream)
//                 MediaStreamTrack = stream.getTracks()[1];
//                 video.src = (window.URL).createObjectURL(stream);
//                 video.play();
//             }).catch((err) => {
//                 console.log(err)
//             })
//         }
//         console.log("open")
//     }
//     Close(){
//         console.log("close")
//         MediaStreamTrack && MediaStreamTrack.stop();
//     }
//     Copy(){
//         const video = document.getElementById("video")
//         const canvas = document.getElementById("canvas")
//         const context = canvas.getContext("2d")
//         console.log("copy")
//         context.drawImage(video,0,0,200,200)
//     }
// }
//
// // const canvas = document.getElementById("canvas")
// // const video = document.getElementById("video")
// // const context = canvas.getContext("2d")
// //
// //
// // function Open(){
// //     if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia()){
// //         navigator.mediaDevices.getUserMedia({
// //             video:true,
// //             audio:true
// //         }).then(function (stream) {
// //             console.log(stream)
// //             MediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];
// //             video.src = (window.URL).createObjectURL(new Blob(stream));
// //             video.play();
// //         }).catch(function (err) {
// //             console.log(err)
// //         })
// //     }else if (navigator.getMedia){
// //         navigator.getMedia({
// //             video:true
// //         }).then((stream) => {
// //             console.log(stream)
// //             MediaStreamTrack = stream.getTracks()[1];
// //             video.src = (window.URL).createObjectURL(stream);
// //             video.play();
// //         }).catch((err) => {
// //             console.log(err)
// //         })
// //     }
// //     console.log("open")
// // }
// // function Close(){
// //     console.log("close")
// //     MediaStreamTrack && MediaStreamTrack.stop();
// // }
// // function Copy(){
// //     console.log("copy")
// //     context.drawImage(video,0,0,200,200)
// // }
//
// export default MyBox;